﻿<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>3stone</title>
<link rel='stylesheet' id='camera-css'  href='css/camera.css' type='text/css' media='all'> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<link href="css/3stone.css" rel="stylesheet" type="text/css">
    <script>
        var userAgent = navigator.userAgent + '';
        if (userAgent.indexOf('iPhone') > -1) {
          document.write('<script src="js/lib/cordova-iphone.js"></sc' + 'ript>');
          var mobile_system = 'iphone';
        } else if (userAgent.indexOf('Android') > -1) {
            document.write('<script src="js/lib/cordova-2.0.0.js"></sc' + 'ript>');
          var mobile_system = 'android';
        } else {
          var mobile_system = '';
        }
      </script>
      <script src="js/lib/jquery.js"></script>
      <!-- your scripts here -->
      <script src="js/app/app.js"></script>
      <script src="js/app/bootstrap.js"></script>
      <script src="js/lib/jquery.mobile.js"></script>
      <script type='text/javascript' src='scripts/camera.min.js'></script> 
      <script src="js/jquery.easing.1.3.js"></script>
	 <!--  <script src="http://maps.google.com/maps/api/js?sensor=false"></script> -->
      <script>
            function onDeviceReady() {
                console.log("We got device ready");
                cordova.exec(null, null, "SplashScreen", "hide", []);
         	}
            // Soon to beonDeviceReady
            // navigator.splashscreen.hide();
      </script>
      <script>
		var locationLat = 24.968509;
		var locationLng = 121.588104;

		$( "#store" ).live( "pagebeforeshow", function() {
		    if ( navigator.geolocation ) {
		        function success(pos) {
		    	    // Location found, show map with these coordinates
			        locationLat = pos.coords.latitude;
			        locationLng = pos.coords.longitude;
					setCategory(1);
		        }
		
		        function fail(error) {
			        console.log(error);
				    alert("裝置抓不到您目前位置，系統將您的位置自動預設為貓空。");
					setCategory(1);
		        }
		            // Find the users current position.  Cache the location for 5 minutes, timeout after 6 seconds
		            navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
	        } else {
				alert("裝置抓不到您目前位置，系統將您的位置自動預設為貓空。");
				setCategory(1);
	        }
		});
		
	    var category_id = '1';
        var ajaxQueryStoresString='';
		var s='';
        function ajaxQueryStores(data){
            ajaxQueryStoresString='';
			ajaxQueryStoresString+="<ul data-role='listview'  data-inset='true'>";
            for(var i=0;i<data.length;i++){
			//尚未轉成javascript版
			with (Math){
	            var EARTH_RADIUS = 6378.137;
	            var lat1 = locationLat;
	            var lng1 = locationLng;
	            var lat2 = data[i].C.latitude;
	            var lng2 = data[i].C.longitude;
	            var radLat1 = lat1 * PI / 180.0;
	            var radLat2 = lat2 * PI / 180.0;
	            var c = radLat1 - radLat2;
	            var radLng1 = lng1 * PI / 180.0;
	            var radLng2 = lng2 * PI / 180.0;
	            var b = (lng1 * PI / 180.0) - (lng2 * PI / 180.0);
	            var s = 2 * asin(sqrt(pow(sin(c / 2), 2) + cos(radLat1) * cos(radLat2) * pow(sin(b / 2), 2)));
	            s = s * EARTH_RADIUS;
	            s = round(s * 10000) / 10000;
				var k = round(s * 10000) / 10;
			}
				

			    if((category_id < 5) || (category_id == 5 && s <= 1)){
                    ajaxQueryStoresString+="<li>"
                    +"<a href='#promotion'>"
                    +"<img src='http://imindmap.asia/mcouponMgr/files/Store/"+data[i].C.logo_path+"' />"
                    +"<h3>"+data[i].C.name+"</h3>"
                    +"<p>("+data[i].C.tel_area+")"+data[i].C.tel+"</p>"
                    +"<p>"+data[i].C.addr+"</p>";
					if (k >= 1000){
					    ajaxQueryStoresString+="<span class='ui-li-count'>距離" + Math.floor(k/1000) + "公里" + Math.floor(k%1000) + "公尺</span>";
					}else{
                       ajaxQueryStoresString+="<span class='ui-li-count'>距離" + Math.round(s*10000)/10 + "公尺</span>";
					}
                    ajaxQueryStoresString+="</a>"
                    +"<a href='#promotion' data-icon='gear'></a>"
                    +"</li>";
				}

            }
			if(data.length == 0){
                ajaxQueryStoresString+="<li>"
                +"<h3>目前沒有資料</h3>"
                +"</li>";
			}
			ajaxQueryStoresString+="</ul>";
		}
		
		
		function setCategory(id){
		    category_id = id;
			jQuery.ajax({
				url: 'http://imindmap.asia/mcouponMgr/Stores/ajaxQueryStores',
				type: 'post',
				data: {
				    category_id: category_id,
					method: 'set_user_prizes'
				},
				dataType: 'jsonp',
				jsonp: true,
				jsonpCallbackString: ajaxQueryStores,
				complete: function(jqXHR){
					if(jqXHR.status==200){
						($("#camera_wrap_2").html(ajaxQueryStoresString)).trigger('create');
					}
					else
					{
						($("#camera_wrap_2").html(' <li>無法連線server，請稍後再試')).trigger('create');
					}
				}	
			});   
		}    
		



    </script>
</head> 
<body> 

<div id="store" data-role="page">
	<div data-role="header" data-position="fixed" data-add-back-btn="true">
    <a href="#" data-icon="back" data-rel="back">上一頁</a>    
    <h1>店家列表</h1>
    <div data-role="navbar">
     <ul>
     <li><a href="#" onclick="location.href='StoreList.html'" data-icon="grid" data-iconpos="top" data-theme="b">店家列表</a></li>
     <li><a href="#coupon" onclick="location.href='PromoList.html'" data-icon="star" data-iconpos="top">優惠好康</a></li>
     <li><a href="#game" data-icon="gear" data-iconpos="top">闖關遊戲</a></li>
     <li><a href="#favorites" data-icon="shadow" data-iconpos="top">我的最愛</a></li>
     </ul>
    </div>    
    <div data-role="navbar">
     <ul>
     <li><a href="" onclick="setCategory(1)">飲食</a></li>
     <li><a href="" onclick="setCategory(2)">服飾</a></li>
     <li><a href="" onclick="setCategory(3)">住宿</a></li>
     <li><a href="" onclick="setCategory(4)">交通</a></li>
     <li><a href="" onclick="setCategory(5)">附近店家</a></li>
     </ul>
    </div>      
	</div>
    
	<div data-role="content">    
    <ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="搜尋店家名稱" ></ul>
    	 	<div id="camera_wrap_2">
            
			</div>
    </div>
	<div class="copyright" data-role="footer" data-id="foo1" data-position="fixed"><div data-role="navbar">
       <ul>
         <li><a href="#" onclick="location.href='StoreMap.html'" data-icon="alert" data-iconpos="top">店家列表/地圖</a></li>
         <li><a href="#" data-icon="grid" data-iconpos="top">QR語音導覽</a></li>
         <li><a href="#" data-icon="alert" data-iconpos="top">設定</a></li>
       </ul>
    </div>
</div>

</body>
</html>
